<template>
	<view class="container">
		<!-- 灰色背景区域 -->
		<view class="gray-background"></view>

		<!-- 优惠券弹窗 -->
		<view class="coupon-popup">
			<view class="popup-header">
				<text class="popup-title">使用优惠券</text>
				<text class="close-btn" @click="closePopup">×</text>
			</view>

			<view class="coupon-content">
				<!-- 可用券 -->
				<view class="coupon-section">
					<view class="section-header">
						<text class="section-title">可用券(1)</text>
						<text class="section-info" @click="showUsage">使用说明</text>
					</view>

					<view class="coupon-item available-coupon">
						<view class="coupon-left red-narrow">
							<text class="amount-label">满100可用</text>
							<text class="amount">5<span>元</span></text>
						</view>
						<view class="coupon-right">
							<text class="coupon-name">冬日暖阳满减券</text>
							<text class="coupon-desc">周六周日福利日，温泉主题旅游尊享满100元减5元优惠</text>
							<view class="coupon-footer">
								<text class="coupon-date">2098.11.01 - 2099.03.31</text>
								<text class="detail-btn">详细说明▼</text>
							</view>
						</view>
						<radio class="coupon-radio"></radio>
					</view>
				</view>

				<!-- 不可用券 -->
				<view class="coupon-section">
					<view class="section-header">
						<text class="section-title">不可用券(1)</text>
					</view>

					<view class="coupon-item unavailable-coupon">
						<view class="coupon-left gray-narrow">
							<text class="amount-label">满减</text>
							<text class="amount">5.5<span>折</span></text>
						</view>
						<view class="coupon-right">
							<text class="coupon-name">周末亲子游满减券</text>
							<text class="coupon-desc">周六周日福利日，亲子主题旅游立减45%，最高优惠200元；优惠券仅限本人使用...</text>
							<view class="coupon-footer">
								<text class="coupon-date">2099.01.01 - 2099.12.31</text>
								<text class="detail-btn">详细说明▼</text>
							</view>
						</view>
						<radio class="coupon-radio" disabled></radio>
					</view>

					<view class="disabled-reason">
						<text class="reason-text">不可用原因：非温泉主题旅游</text>
					</view>
				</view>
			</view>

			<button class="confirm-btn" @click="confirmSelection">确认选择</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 是否显示弹窗
	const isPopupShow = ref(true);

	// 关闭弹窗
	const closePopup = () => {
		isPopupShow.value = false;
		console.log('关闭弹窗');
	};

	// 显示使用说明
	const showUsage = () => {
		console.log('显示使用说明');
	};

	// 选择优惠券
	const selectCoupon = () => {
		console.log('选择优惠券');
	};

	// 确认选择
	const confirmSelection = () => {
		console.log('确认选择优惠券');
	};
</script>

<style scoped>
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.gray-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 800px;
		background-color: #999;
	}

	.coupon-popup {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		position: absolute;
		top: 170px;
		left: 0;
		width: 100%;
		height: 600px;
		background-color: #fff;
		border-radius: 10px 10px 0 0;
		padding: 20px;
		box-sizing: border-box;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}

	.popup-title {
		font-size: 16px;
		font-weight: bold;
	}

	.close-btn {
		font-size: 20px;
		color: #999;
	}

	.coupon-content {
		margin-bottom: 20px;
	}

	.coupon-section {
		margin-bottom: 20px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.section-title {
		font-size: 14px;
		font-weight: bold;
		color: #333;
	}

	.section-info {
		font-size: 12px;
		color: #999;
	}

	.coupon-item {
		display: flex;
		background-color: #fff;
		margin-bottom: 10px;
		border-radius: 5px;
		padding: 15px;
		align-items: center;
	}

	.available-coupon {
		border: 1px solid #eee;
	}

	.unavailable-coupon {
		background-color: #f5f5f5;
		color: #999;
	}

	/* 红色窄左侧区域 */
	.red-narrow {
		background-color: #f54;
		color: white;
		padding: 15px 10px;
		margin-right: 15px;
		border-radius: 5px 0px 0px 5px;
		min-width: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 灰色窄左侧区域 */
	.gray-narrow {
		background-color: #ddd;
		color: #666;
		padding: 15px 10px;
		margin-right: 15px;
		border-radius: 5px 0px 0px 5px;
		min-width: 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.amount-label {
		font-size: 12px;
	}

	.amount {
		font-size: 24px;
		font-weight: bold;
	}

	.coupon-right {
		flex: 1;
	}

	.coupon-name {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 8px;
	}

	.coupon-desc {
		font-size: 12px;
		color: #666;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.coupon-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.coupon-date {
		font-size: 12px;
		color: #999;
	}

	.detail-btn {
		font-size: 12px;
		color: #666;
		text-align: right;
	}

	.coupon-radio {
		margin-left: 10px;
	}

	.disabled-reason {
		padding: 8px 15px;
		background-color: #fff;
		border-radius: 5px;
	}

	.reason-text {
		font-size: 12px;
		color: #ff6600;
	}

	.confirm-btn {
		width: 100%;
		height: 40px;
		background: linear-gradient(to right, #4e95ff, #66a5ff);
		color: white;
		border: none;
		border-radius: 20px;
		font-size: 16px;
		margin-top: 20px;
	}
</style>